<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>弹出与收起二级菜单</title>
		<script src="jQuery/jquery-3.7.1.js"></script>
		<script type="text/javascript">
			$(function(){
				// 使用 hover 方法绑定 mouseenter 和 mouseleave 事件处理程序
				$(".all > li").hover(
					function() { $(this).children("ul").slideDown(500); }, // 鼠标进入时展开子菜单
					function() { $(this).children("ul").slideUp(500); }   // 鼠标离开时收起子菜单
				);
			});
		</script>
		</head>
		<body>
		<ul class="all">
		    <li>一级菜单1
		       <ul>
		           <li>二级菜单1</li>
		           <li>二级菜单2</li>
		           <li>二级菜单3</li>
		       </ul>
		    </li>
		    <li>一级菜单2
		        <ul>
		            <li>二级菜单1</li>
		            <li>二级菜单2</li>
		            <li>二级菜单3</li>
		        </ul>
		    </li>
		    <li>一级菜单3
		        <ul>
		            <li>二级菜单1</li>
		            <li>二级菜单2</li>
		            <li>二级菜单3</li>
		        </ul>
		    </li>
		</ul>
		</body>
</html>